<template>
	<view>
		<view class="out">
			<input type="text" @focus="isActive = true" @blur="isActive = false" v-model="iptValue"
				@confirm="onConfirm" />
			<img src="/static/chicken.gif" :class="{'active': isActive}" class="pic" />
		</view>

		<view>预览：{{ iptValue }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iptValue: '',
				isActive: false
			};
		},
		methods: {
			onConfirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative;

		input {
			border: 1px solid #ccc;
			height: 40px;
			position: relative;
			z-index: 2;
			background: #fff;
			padding: 0 10px;
		}

		.pic {
			width: 24px;
			height: 24px;
			z-index: 1;
			position: absolute;
			top: 0px;
			left: calc(50% - 12px);
			transition: top 0.3s;
		}

		.pic.active {
			top: -24px;
		}
	}
</style>